<template>
	<div class="box" :style="{ backgroundImage: `url(${loginbc})` }">
		<div class="register_login">
			<img src="@/assets/易游小logo.png" alt="" style="margin-left:114px">
		</div>
		<div class="register_head">
			<div class="register_content1">
                <div class="register_introduce">
                    <p class="register_p">账号注册</p>
                </div>
				<el-form :model="userForm" status-icon :rules="rules" ref="userForm" label-width="74px" class="register_content" >
					<el-form-item label="昵称" prop="userName">
						<el-input placeholder="输入你的名称" v-model="userForm.userName" clearable style="width:80%"></el-input>
					</el-form-item>
					<el-form-item label="用户名" prop="loginName">
						<el-input placeholder="输入你的用户名，用于登录" v-model="userForm.loginName" clearable  style="width:80%"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input placeholder="输入你的密码" v-model="userForm.password" show-password style="width:80%"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPassWord">
						<el-input placeholder="确认你的密码" v-model="userForm.checkPassWord" show-password  style="width:80%"></el-input>
					</el-form-item>
					<el-form-item label="出生日期" prop="birthday" label-width="80">
						<el-date-picker type="date" placeholder="选择日期" v-model="userForm.birthday"></el-date-picker>
					</el-form-item>
					<el-form-item label="邮箱号" prop="mail">
						<el-input placeholder="您的邮箱号" v-model="userForm.mail" clearable style="width:80%"></el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="code">
						<el-input placeholder="输入验证码" v-model="userForm.code" clearable style="width:46%"></el-input>
						<el-button class="login_button" :class="{disabled: !this.canClick}" style="margin-left:14px" @click="countDown('userForm')">{{content}}</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain style="margin-top:10px;width:80%" @click="determine_register('userForm')">确认注册</el-button>
						<el-button plain style="margin-top:10px;margin-left:0;width:80%" @click="goLogin()">已有账户？去登陆</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import loginbc from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
export default {
	name: 'loginViews',
		data () {
			// 校验登录名查重
			var checkLoginName = (rule, value, callback) => {
				if (value == '') {
					callback(new Error('用户名不能为空'))
				} else {
					this.$axios.get('http://127.0.0.1:8082/user/checkLoginName?loginName=' + value).then(res => {
						if(res.data.obj > 0){
							callback(new Error('当前名字已存在'))
						} else {
							callback();
						}
					})
				}
			}
			// 校验密码
			var checkAge = (rule, value, callback) => {
				if (value !== '') {
					if (value.length < 6) {
						callback(new Error('长度在 6 个字符'))
						this.$axios.get('http://127.0.0.1:8082/user/checkLoginName?loginName=', + value).then(res => {
							if(res > 0){
								callback(new Error('当前名字已存在'))
							} else {
								callback();
							}
						})
					} else {
						callback()
					}
				} else if (value === '') {
					callback(new Error('请输入密码'))
				} else {
					callback()
				}
			}
			// 再次输入密码校验规则
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.userForm.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			}
			// 邮箱校验是否绑定
			let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
			var validateMailQQ = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('邮箱不能为空'));
				} else if (!reg.test(value)) {	
               		callback(new Error('输入正确的邮箱'))
            	} else {
					this.$axios.get('http://127.0.0.1:8082/login/checkMail?mail=' + value).then(res => {
						if (res.data.code === '999') {
							callback(new Error('当前邮箱已绑定用户'))
						} else {
							callback();
						}
					})
				}
			};
			return {
				loginbc: loginbc, // 背景图片
				canClick: true, //添加canClick
				totalTime: 120, //记录具体倒计时时间
				content: '发送验证',  // 按钮里显示的内容
				userForm:{ // 输入框集合
					// 登录名称
					loginName: '',
					// 用户名称
					userName:'',
					// 密码	
					password:'',
					// 二次确认密码
					checkPassWord:'',
					// 验证码
					code: '',
					// 邮箱号
					mail: '',
					// 生日
					birthday: ''
				},
				// 校验规则
				rules: {
					userName: [
						{ required: true, message: '请输入您的昵称.+', trigger: 'blur' },
					],
					loginName: [
						{validator: checkLoginName, trigger: 'blur'}
					],
					password: [
						{ validator: checkAge, trigger: 'blur' }
					],
					checkPassWord: [
						{ validator: validatePass, trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请输入您的手机号', trigger: 'blur' },
						{
							pattern: /^[1]([3-9])[0-9]{9}$/,
							message: '请正确输入11位手机号码',
							trigger: 'blur'
						}
					],
					verification: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
					],
					mail: [
						{ validator: validateMailQQ , trigger: 'blur' }
					],
					birthday: [
						{ required: true, message: '请选择生日', trigger: 'change' },
					],
				}
			}
		},
		mounted () {
		},
		methods: {
			// 注册用户
			registerUser () {
				var formdata = new FormData()
				formdata.set('userName', this.userForm.userName)
				formdata.set('password', this.userForm.password)
				formdata.set('loginName', this.userForm.loginName)
				formdata.set('mail', this.userForm.mail)
				formdata.set('code', this.userForm.code)
				formdata.set('birthday', this.userForm.birthday)
				this.$axios.post('http://127.0.0.1:8082/login/registerUser', formdata).then(res =>{
					if (res.data.obj > 0) {
                    	this.message('恭喜您，注册成功', 'success')
						this.$router.push({path: '/login'})
					} else if(res.data.code === '999'){
						this.message('验证码已过期，请重新获取', 'warning')
					} else {
						this.message('注册失败', 'warning')
					}
				})
			},
			// 邮箱发送验证码
			sendCodeByQQMailRe () {
				this.$axios.get('http://127.0.0.1:8082/login/sendCodeByQQMailRe?mail=' + this.userForm.mail)
				.then(res => {
					if (res.data.code === '999') {
						this.totalTime = 0
						this.message('邮箱未绑定', 'warning')
					}
				})
			},
			// 去登录页面
			goLogin () {
				this.$router.push({path: '/login'})
			},
			// 点击发送验证码时倒计时
			countDown (userForm) {
				debugger
				this.$refs[userForm].validateField('mail', (valid) => {
					if (valid === '') {
						this.sendCodeByQQMailRe()
						if (!this.canClick) return  //改动的是这两行代码
							this.canClick = false
							this.content = this.totalTime + 's后重新发送'
							let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's后重新发送'
						if (this.totalTime < 0) {
							window.clearInterval(clock)
							this.content = '重新发送验证码'
							this.totalTime = 120
							this.canClick = true  //这里重新开启
						}
						},1000)
					} else {
						return false;
					}
				})
			},
			// 点击确认注册按钮时的校验提示
			determine_register(userForm){
				this.$refs[userForm].validate((valid) => {
					if (valid) {
						this.registerUser()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//消息提示框
			message(message,type){
				this.$message({
					message:message,
					type: type
				});
			},
		}
}
</script>


<style scoped>
.box {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.register_head {
	background-color: rgb(255, 255, 255);
	width: 430px;
	height: 650px;
	margin: 50 auto;
	margin-left: 39%;
	margin-top:40px;
}
.register_login{
	width: 430px;
	height: 120px;
	margin-left: 39%;
	margin-top:100px
}
.register_content {
	width: 100%;
	height: 40%;
	margin-left: 20px;
	margin-top: 30px;
}
.register_input{
	margin-top: 10px;
}
.register_button{
	margin-left: 30px;
}
.register_butto1{
	width: 70%;
}
.register_introduce{
    width: 430px;
    height: 50px;
    background-color: ghostwhite;
}
.register_p{
    text-align: center;
    padding-top: 12px;
}
</style>